@charset "utf-8";
/* CSS Document */


body{ font-size: 14px; margin: 0 auto; text-align: left; }
header{ width: 100%; position:absolute; z-index: 1000 }

a{-webkit-transition:color .2s ease-in-out;
transition:color .2s ease-in-out;
-webkit-transition:background-color .2s ease-in-out;
transition:background-color .2s ease-in-out}

.w{ width: 80%; margin: 0 auto }
.top{ background-color: #2a65bd; line-height: 40px; color: #fff }
.top a{ color: #fff }
.top span{ margin-right: 30px; }
.top span.toptel{ background: url(../images/tel.png) left center no-repeat; padding-left: 30px;  }
.top span.topadd{background: url(../images/address.png) left center no-repeat; padding-left: 30px;}
.top .fr{ background:url(../images/English.png) left center no-repeat; padding-left: 40px;  }

.header{ height: 100px; background:rgba(42,101,189,.8); }
.header .fl{ padding-top: 10px; }
.header .fr{ padding-top: 30px; }
.header .fr li{ float: left; margin: 0 20px; }
.header .fr li a{ color: #fff; font-size: 16px; line-height: 35px; display: block; }
.header .fr li a:hover{ border-bottom: 2px solid #fff; color: #fff }

.sidepic_m{ display: none }

.sidepic{ background:url(../images/sidepic.jpg) center bottom no-repeat; background-size:100% 100%;  height: 860px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative;  }
.sidebg{ width: 50%; height: 860px; background: url(../images/cbg.png) right 140px no-repeat;  filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.sidecon{ width: 80%; position:absolute; top: 0; left: 10%; height: 860px; text-align: left; }

.sidecon .fl{ width: 55%; padding-top: 260px; text-align: left; }
.sidecon .fr{ width: 45%; padding-top: 260px; text-align: left; }
.sidecon h2{ display: block; color: #fff; font-size:60px; }
.sidecon span{ display: block; color: #fff; font-size: 48px;  font-family: arial; margin: 10px 0 20px 0; }
.sidecon a{ margin: 0; line-height: 55px; width: 200px; font-size: 16px; border: 2px solid #fff; display: block; text-align: center; font-weight: bolder; color: #fff }
.sidecon a:hover{ background-color: #fff; color: #004086;  }
.sidecon p{ display: block; color: #009944; font-size: 20px;  font-family: arial; margin: 20px 0 20px 0; }


.sidecon .fr h2{color: #2a65bd;}
.sidecon .fr span{color: #2a65bd;}
.sidecon .fr a{border: 2px solid #2a65bd; background-color: #2a65bd;}
.sidecon .fr a:hover{ background-color: #fff; color: #004086;  }
.sidecon .fr p{color: #2a65bd;}
.footer{ border-bottom: 5px solid #2a65bd; color: #333; line-height: 27px; padding: 20px 0; }


@media (max-width:768px){
header{ position:static; }
.w{ width: 100%;}
.top .fl{ float: none; display: none; }
.top .fr{  text-align: right; padding-right: 10px; }
.header{ height: auto;   background-color: #2a65bd; padding-bottom: 10px;}
.header .fl{float: none; width: 100%; text-align: center; }
.header .fr{ float: none; width: 100% }
.header .fr li{ width: 33.333333%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  margin: 0; }
.header .fr li a{ text-align: center; border:1px solid #fff; margin: 5px; }
.header .fr li.active a{ background-color: #fff; color: #2a65bd }
.sidepic{ display: none; }

.sidepic_m{ display: block; background:rgba(42,101,189,.8); overflow: hidden; }
.sidepic_but{ background-color: #2a65bd; color: #fff; margin: 20px; padding: 10px 0; }
.sidepic_but a h2{ display: block; font-size: 36px; text-align: center;  color: #fff;}
.sidepic_but a span{ display: block; font-size: 24px; text-align: center;  color: #fff;}

.footer{ padding: 10px; background:rgba(42,101,189,.8); border-bottom:0; color: #fff; border-top: 5px solid #2a65bd;line-height: 23px;  }
}